<template>
  <div class="navbar-wrapper headBack height-88">
    <div class="navbar height-88 bot" style="margin-bottom: 0px;" v-bind:style="{'color':titleColor,'background':titleBgColor}">
      <div class="left">
        <slot>
          <!--<div @click="leftCall" class="font-34" v-show="leftShow"><i style="font-size:0.9rem;" class="paco icon-back"></i></div>-->
          <div @click="leftCall" class="font-34" v-show="leftShow">
            <span v-if="leftType=='img'"><img :src="rightName" width=50% height=45% style="margin-top:0.5rem;"/></span>
            <span v-bind:style="{'color':leftColor}">{{leftName}}</span>
          </div>
        </slot>
      </div>
      <div v-if="titleType=='string'" class="font-34" span @click.stop="choose"><span>{{name}}</span>
        <div v-show="canChoose" class="trangle"></div>
      </div>
      <div v-else class="font-34 qs-tab">
        <span class='qs-tab-tabs' v-for="(item,index) in chooseArr" @click="titleSwitch(index)" v-bind:class="{'qs-tab-tabs-active':index == num}">{{item}}</span>
      </div>
      <div class="right"></div>
      <div class="right" v-show="rightShow" v-bind:style="{'color':rightColor}">
        <a @click="rightCallTwo" style="font-size:1rem;" v-if="rightTwoType != '' && rightTwoType == 'url'"><img :src="rightTwoName" width=50% height=45% style="margin-top:0.5rem;"/></a>
        <a @click="rightCallTwo" style="font-size:1rem;" v-if="rightTwoType != '' && rightTwoType == 'string'">{{rightTwoName}}</a>
        <a @click="rightCall" style="font-size:1rem;" v-if="rightType=='icon'">{{rightName}}</a>
        <a @click="rightCall" class="font-30" v-if="rightType=='string'">{{rightName}}</a>
        <a @click="rightCall" style="font-size:1rem;width:1rem;height:1rem;" v-if="rightType=='url'"><img :src="rightName" width=50% height=45% style="margin-top:0.5rem;"/></a>
      </div>
    </div>
    <ul v-show="isChoose" class="chooseDiv">
      <li v-for="(item,index) in chooseArr" class="font-30 chooseLi" v-bind:class="{'changeColor':index == num}" @click="chooseLi(index)">{{item}}</li>
    </ul>
  </div>
</template>
<script>
    export default{
        name:"rst-title",
        props: {
          name: {   // 可选字段，有默认值
            type:String,
            default: "标题"
          },
          titleColor:{
            type:String,
            default:'#fff'
          },
          titleBgColor:{
            type:String,
            default:'#00aaee'
          },
          canChoose:{
            type: Boolean,
            default: false
          },
          isChoose:{
            type: Boolean,
            default: false
          },
          chooseArr:{
            default(){
              return ['标题','题目']
            }
          },
          centerMethod:{
            type:Function,
            default:null
          },
          titleType:{
            type:String,
            default:'string'
          },
          leftShow: {  // 左边是否显示,默认不显示
            type: Boolean,
            default:true
          },
          leftName:{
            type:String,
            default:'返回'
          },
          leftType:{
            type:String,
            default:'string'
          },
          leftColor:{
            type:String,
            default:'#000'
          },
          rightShow: {  // 右边是否显示,默认不显示
            type: Boolean,
            default:false
          },
          leftMethod: {  //传入左边的方法名,需在调用的地方定义本地方法
            type:Function,
            default:null
          },
          rightMethod: { //传入右边的方法名,需在调用的地方定义本地方法
            type:Function,
            default:null
          },
          rightName: {   // 可选字段，有默认值""
            type:String,
            default: ""
          },
          rightType: {   // 可选字段，有默认值为String时直接输出rightName, 可选Icon时传入 right-name="paco icon-contact"
            type:String,
            default: "string"
          },
          rightColor:{
            type:String,
            default:'blue'
          },
          rightTwoType:{
            type:String,
            default:''
          },
          rightTwoName:{
            type:String,
            default:''
          },
          rightTwoMethod:{
            type:Function,
            default:null
          }
        },
        data(){
          return{
              num:0,
          }
        },
		    methods:{
          leftCall(){
            window.history.go(-1);
            //this.leftMethod() //需在调用的地方定义本地方法
          },
          rightCall(){
            this.rightMethod() //需在调用的地方定义本地方法
          },
          rightCallTwo(){
            this.rightTwoMethod()
          },
          choose(){
            if(this.canChoose){
              this.isChoose = !this.isChoose;
            }
          },
          chooseLi(index){
            this.num = index;
            this.name = this.chooseArr[index];
            this.isChoose = false;
            this.centerMethod()
          },
          titleSwitch(index){
            this.num = index;
          }
		    }
    }
</script>

